<template>
  
  <div
   
    class="  bg_bigimage h-screen flex flex-col text-white overflow-hidden"
  >
    <!-- 头部 -->
    <div
      class="head_image w-full h-10"
      style="background-size: 100%"
    >
      <div class="head-text">广西参皇智慧养鸡服务平台</div>
    </div>
    <!-- 内容部分 -->
    <div class="main w-full flex-1 flex h-full">
      <!-- 左边 -->
      <div class="right-box mian-item h-full bgs-left box-border">
        <div
          style="background-size: 100% 100%"
          class=" w-full h-full flex flex-col bg-[url('assets/image/左.png')] py-5 box-border bg-left-top bg-no-repeat"
        >
          <div class="flex-1">
            <div
              class="samll_headl w-full bg-[url('assets/image/smallhead_left.png')] bg-auto bg-no-repeat"
            >
              育种管理
            </div>
            <div>
<HorizontallBar/>
            </div>
          </div>
          <div class="flex-1">
            <div
              class="samll_headl w-full bg-[url('assets/image/smallhead_left.png')] bg-auto bg-no-repeat"
            >
              环控系统
            </div>
            <div class="flex flex-row ml-7 mt-3 mb-3 mr-8">
              <div class="flex-1 rounded-lg overflow-hidden">
                <img class="felx-1 h-full" src="./../../assets/image/12.jpg" alt="" />
              </div>
              <div class="flex-1 flex flex-col">
                <div class=" box-list bg-[url('assets/image/土壤边框.png')] bg-auto bg-no-repeat"></div>
                <div class="box-list bg-[url('/assets/image/土壤边框.png')] bg-auto bg-no-repeat"></div>
                <div class="box-list bg-[url('assets/image/土壤边框.png')] bg-auto bg-no-repeat"></div>
                <div class="box-list bg-[url('assets/image/土壤边框.png')] bg-auto bg-no-repeat"></div>
              </div>
            </div>
          </div>
          <div class="flex-1 flex flex-col">
            <div
              class="samll_headl w-full bg-[url('assets/image/smallhead_left.png')] bg-auto bg-no-repeat"
            >
              疾病诊断
            </div>
            <div
              class="bg-size border_img border_img_left flex-1 bg-[url('assets/image/border.png')] bg-auto bg-no-repeat"
            ></div>
          </div>
          <div class="flex-1">
            <div
              class="samll_headl w-full bg-[url('assets/image/smallhead_left.png')] bg-auto bg-no-repeat"
            >
              精准饲喂
            </div>
          </div>
        </div>
      </div>
      <!-- 中间 -->
      <div class="flex-1 h-full flex flex-col">
        <div class="center-top flex-1">
          <!-- 内容区域 -->
          <div v-show="tabIndex === 0" class="h-full">
            <h1>内容1</h1>
          </div>
          <div v-show="tabIndex === 1" class="h-full">
            <h1>内容2</h1>
          </div>
          <div v-show="tabIndex === 2" class="h-full">
            <h1>内容3</h1>
          </div>
          <div v-show="tabIndex === 3" class="h-full">
            <h1>内容4</h1>
          </div>
        </div>
        <div class="h-20 relative">
          <div class="center-bottom h-1/2 w-full"></div>
          <div
            class="center-bottom h-1/2 bg-[url('assets/image/difeng.png')] bg-no-repeat m-auto"
          ></div>
          <div class="tab_box absolute h-1/2 flex justify-between">
            <div v-for="(item, index) in tabImages" :key="index">
              <img
                class="block_img"
                :src="getImageSrc(index)"
                @click="selectTab(index)"
              />
            </div>
          
          </div>
        </div>
      </div>
      <!-- 右边 -->
      <div class="right-box mian-item h-full bgs-right box-border">
        <div
          style="background-size: 100% 100%"
          class="w-full h-full flex flex-col bg-[url('assets/image/右.png')] bg-cover py-5 box-border bg-left-top bg-no-repeat"
        >
          <div class="flex-1">
            <div
              class="samll_head w-full bg-[url('assets/image/smallhead_right.png')] bg-auto bg-no-repeat text-right"
            >
              安全溯源
            </div>
          </div>
          <div class="flex-1 flex flex-col">
            <div
              class="samll_head w-full bg-[url('assets/image/smallhead_right.png')] bg-auto bg-no-repeat text-right"
            >
              异常行为预警
            </div>
            <div
              class="bg-size border_img border_img_right flex-1 bg-[url('assets/image/border.png')] bg-auto bg-no-repeat"
            ></div>
          </div>
          <div class="flex-1">
            <div
              class="samll_head w-full bg-[url('assets/image/smallhead_right.png')] bg-auto bg-no-repeat text-right"
            >
              健康评估
            </div>
          </div>
          <div class="flex-1 flex flex-col">
            <div
              class="samll_head w-full bg-[url('assets/image/smallhead_right.png')] bg-auto bg-no-repeat text-right"
            >
              生物安全防控
            </div>
            <div
              class="bg-size border_img border_img_right flex-1 bg-[url('assets/image/border.png')] bg-auto bg-no-repeat"
            ></div>
            <!-- <img src="./../../components/echarts/HorizontallBar.vue" alt=""> -->
            <!-- <img src="./../../assets/" alt=""> -->
          </div>
        </div>
      </div>
    </div>
  </div>


</template>
<script setup>
// import VerticalBar from "./components/VerticalBar.vue";
import HorizontallBar from "./../../components/echarts/HorizontallBar.vue";
// import MapChart from "./components/MapChart.vue";
// import RadarBar from "./components/RadarBar.vue";
// import Relation from "@/components/Relation.vue";
// import RingBar from "./components/RingBar.vue";
// import TotalData from "./components/TotalData.vue";
// import WordCloud from "./components/WordCloud.vue";

import defalutBlockimg1 from "./../../assets/image/block_default.png";
import defalutBlockimg2 from "./../../assets/image/block_default.png";

import defalutBlockimg3 from "./../../assets//image/block_default.png";
import defalutBlockimg4 from "./../../assets/image/block_default.png";
import activeBlockimg from "./../../assets/image/block_active.png";

// import { getHorizontallBar } from "@/api/HorizontallBar.js";
import { ref, onMounted, reactive } from "vue";
onMounted(() => {
  Loaddata();
});
let tabIndex = ref(0);
const getImageSrc = (index) => {
  if (tabIndex.value === index) {
    return activeBlockimg;
  } else {
    return tabImages[index];
  }
};
const tabImages = reactive([
  defalutBlockimg1,
  defalutBlockimg2,
  defalutBlockimg3,
  defalutBlockimg4,
]);

const data = ref(null);
const datas = ref(null);
const data2 = ref(null);

const selectTab = (index) => {
  console.log(index);
  tabIndex.value = index;
};
const Loaddata = async () => {
  // data.value = await getHorizontallBar();
  // datas.value = data.value.data.data;
  // data2.value = data.value.data.data.serverData
  // console.log(datas.value);
};
// Loaddata();
//实现数据的动态变化
// setInterval(() => {
//   Loaddata();
// }, 3000);
</script>
<style scoped>
.bg_bigimage{
  background: url("./../../assets/image/bigimage.jpg") no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
.head_image{
  background: url("./../../assets/image/head.png") no-repeat;
  background-position: center;
  background-size: auto;

}
.head-text {
  color: #c4f9f0;
  font-size: 19px;
  text-align: center;
  font-weight: bold;
  padding-top: 5px;
}

.mian-item {
  width: 21.5%;
  /* background-blend-mode: multiply; */
}
.border_img {
  width: 90%;
  box-sizing: border-box;
}
.border_img_left {
  margin-left: 15px;
}
.border_img_right {
  margin-right: 0px;
  margin-left: 22px;
}
.bg-size {
  background-size: 100% 100%;
}
.bgs-left {
  background: linear-gradient(to right, #040404, transparent);
}

.bgs-right {
  background: linear-gradient(to left, #040404, transparent);
}

.block_img {
  height: 62px;
  width: 62px;
}

.center-bottom {
  background-size: 100% 100%;
  width: 60%;
}

.samll_head {
  height: 26px;
  color: #c4f9f0;
  background-size: 100% 100%;
  font-size: 12px;
  padding: 6px 12px 2px 10px;
  margin-right: 10px;
}

.samll_headl {
  height: 26px;
  color: #c4f9f0;
  background-size: 100% 100%;
  font-size: 12px;
  padding: 6px 10px 2px 10px;
  margin-left: 10px;
}

.tab_box {
  left: 0;
  top: -10px;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 37%;
}
</style>
